<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="spanNum" v-for="item in boxData" :key="item.id">
                <div class="box-style" @click="toOrderView(item.id)">
                    <div :class="'icon-box '+item.bg_color">
                        <i :class="item.icon"></i>
                    </div>
                    <div class="box-content">
                        <p :class="item.text_color">{{item.data}}</p>
                        <p class="text-color">{{item.text}}</p>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "orderBox",
        props:['boxData'],
        computed:{
            spanNum(){
                let span = 24/this.boxData.length;
                return span
            }
        },
        methods:{
            toOrderView(id){
                console.log(id);
                this.$router.push({
                    path:'/supplier_order',
                    query:{
                        status:id
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .box-style{
        width: 100%;
        height:100px;
        box-sizing: border-box;
        border-radius: 10px;
        background-color: #fff;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        cursor: pointer;
    }
    .text-color{
        color:#66b1ff;
    }
    .icon-box{
        width: 30%;
        height:100px;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;
        border-radius: 10px 0 0 10px;
    }
    .icon-box i{
        font-size: 30px;
        color:#fff;

    }
    .info{
        background-color:#909399;
    }
    .info-color{
        color:#909399;
    }
    .priamy{
        background-color:#409EFF;
    }
    .priamy-color{
        color:#409EFF;
    }
    .success{
        background-color: #67C23A;
    }
    .success-color{
        color:#67C23A;
    }
    .warning{
        background-color: #E6A23C;
    }
    .warning-color{
        color:#E6A23C;
    }
    .box-content p{
        margin: 5px;
        font-weight: bold;
        font-size: 16px;
    }
    .box-content{
        flex:1;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: center;
    }
</style>
